<template>
  <!-- 积分规则组件 -->
  <div class="vy-cmp-cs-score">
    <div class="vy-cmp-common-title">
      <span class="vy-cmp-common-title-left"
        >积分规则<span style="font-size: 12px;">（单位积分）</span></span
      >
    </div>
    <div class="vy-cmp-cs-score-container">
      <div class="vy-cmp-cs-score-form">
        <!-- row 1 -->
        <a-row class="vy-row first-row">
          <a-col :span="4" class="vy-row-col1">
            <a-checkbox
              :checked="!!score.chooseAll"
              @change="click_rowTitle_changeAll($event)"
            >
              全部选择
            </a-checkbox>
          </a-col>
          <a-col :span="20" class="vy-row-col2">
            <a-row
              style="display: flex; justify-content: space-between;"
              v-if="rowTitleList.length"
            >
              <template v-for="(rule, index) in rowTitleList">
                <a-col
                  :span="Math.round(20 / rowTitleList.length)"
                  :key="index"
                >
                  <a-row class="vy-row-mb">
                    <a-checkbox
                      :checked="!!rule.isStart"
                      @change="click_rowTitle_change(rule, $event)"
                      >{{ rule.ruleName }}</a-checkbox
                    >
                  </a-row>
                  <a-row>
                    <a-col :span="12">
                      <a-input-number
                        :min="0"
                        @change="titleCreditChange(rule, index)"
                        v-model="rule.credit"
                        v-if="!!rule.isStart"
                      />
                      <span class="unable-label" v-else>未开启</span>
                    </a-col>
                    <a-col :span="7">
                      <!-- <div style="cursor: pointer;" @click=click_turnOnAndOfAllMark(rule)>
                        <svg class="icon" aria-hidden="true" font-size="32" color="#C1C2C3">
                          <use :xlink:href="!!rule.isStart ? '#iconbiyan' : '#iconyanjing'"></use>
                        </svg>
                      </div> -->
                    </a-col>
                  </a-row>
                </a-col>
              </template>
            </a-row>
          </a-col>
        </a-row>

        <!-- row 2 -->
        <a-row
          class="vy-row"
          v-for="(project, index) in rowContentList"
          :key="index"
        >
          <a-col :span="4" class="vy-row-col1">
            <a-checkbox
              :checked="!!project.isStart"
              @change="click_rowContent_change(project, $event)"
            >
              {{ project.moduleName }}
            </a-checkbox>
          </a-col>
          <a-col :span="20" class="vy-row-col2">
            <a-row
              style="display: flex; justify-content: space-between;"
              v-if="project.moduleRuleVos.length"
            >
              <template v-for="(rule, index) in project.moduleRuleVos">
                <a-col
                  :span="Math.round(20 / project.moduleRuleVos.length)"
                  :key="index"
                >
                  <a-row>
                    <a-col :span="12">
                      <a-input-number
                        :min="0"
                        v-model="rule.credit"
                        v-if="!!rule.isStart"
                      />
                      <span class="unable-label" v-else>未开启</span>
                    </a-col>
                    <a-col :span="7">
                      <div
                        style="cursor: pointer;"
                        @click="click_turnOnAndOffMark(project, rule)"
                      >
                        <svg
                          class="icon"
                          aria-hidden="true"
                          font-size="32"
                          color="#C1C2C3"
                        >
                          <use
                            :xlink:href="
                              !!rule.isStart ? '#iconbiyan' : '#iconyanjing'
                            "
                          ></use>
                        </svg>
                      </div>
                    </a-col>
                  </a-row>
                </a-col>
              </template>
            </a-row>
          </a-col>
        </a-row>
      </div>
      <a-row>
        <a-button type="primary" @click="click_save_info">保存更改</a-button>
      </a-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "vy-cmp-cs-score",
  data() {
    return {
      projectId: null, // 项目id
      score: {
        chooseAll: false, // 全选
      },
      rowTitleList: [], // 第一行头部列表
      rowContentList: [], // 第2～n行内容列表
    };
  },
  watch: {
    // 全部选择 - 选中监听
    "score.chooseAll"(val) {
      this.rowContentList.forEach((project) => {
        project.isStart = val;
        if (!val) {
          // 第2～n行所有开启状态切换成未开启状态
          project.moduleRuleVos.forEach((ruleVos) => {
            ruleVos.isStart = val;
          });
        }
      });
    },
    rowContentList: {
      deep: true,
      handler(list) {
        let checkedLen = list.filter((project) => {
          return project.isStart;
        }).length;
        // 列表全部选中，则勾选“全部选择”
        if (checkedLen == list.length) {
          this.score.chooseAll = true;
        }
      },
    },
  },
  created() {
    this.projectId = this.$route.query.projectId;
  },
  mounted() {
    this.$nextTick(() => {
      this.queryInfo();
    });
  },
  methods: {
    // 查询积分规则表
    queryInfo() {
      let params = {
        projectId: this.projectId,
      };
      this.$axios
        .get("/modulecreditrule/getCreditRule", { params })
        .then((res) => {
          // 构建第1行
          this.rowTitleList = res.creditRuleVos || [];
          setTimeout(() => {
            // 构建第2～n行
            this.rowContentList = res.moduleCreditVos || [];
          }, 1);
        });
    },
    titleCreditChange(item, index) {
      let _score = item.credit;
      this.rowContentList.forEach((project) => {
        let ruleVos = project.moduleRuleVos[index];
        ruleVos.credit = _score;
      });
    },
    // 全部选择-复选框勾选事件
    click_rowTitle_changeAll(e) {
      this.score.chooseAll = e.target.checked;
    },
    // 第一行规则-复选框勾选事件
    click_rowTitle_change(rule, e) {
      rule.isStart = e.target.checked;
      console.log("rule.isStart", rule.isStart);
      // if (!rule.isStart) {
      // 将当前规则下面所有的开启状态切换成未开启状态
      this.rowContentList.forEach((project) => {
        // 设置左侧项目为开启状态
        project.isStart = true;
        // 当前行未开启状态
        // if (!project.isStart) {
        project.moduleRuleVos.forEach((ruleVos) => {
          if (ruleVos.ruleId == rule.ruleId) {
            ruleVos.isStart = rule.isStart;
          }
        });
        // }
      });
      // }
    },
    // 第一列项目-复选框勾选事件
    click_rowContent_change(project, e) {
      project.isStart = e.target.checked;
    },
    // 第一行-内容积分切换事件
    click_turnOnAndOfAllMark(rule) {},
    // 第2～行内容积分切换事件
    click_turnOnAndOffMark(project, scoreRule) {
      // 找到当前规则
      let rule = this.rowTitleList.filter(
        (item) => item.ruleId == scoreRule.ruleId
      );
      // 设置当前规则为开启状态
      rule[0] && (rule[0].isStart = true);
      // 设置左侧项目为开启状态
      project.isStart = true;
      // 切换本身的状态
      scoreRule.isStart = !scoreRule.isStart;
    },
    // 保存/更新积分
    saveInfo() {
      // 第一行打勾的积分规则
      let data = this.rowTitleList.map((rule) => {
        return {
          crmId: String(rule.ruleId), // 列: 完成主题
          isStart: !!rule.isStart, // 是否开启
          credit: String(rule.credit || 0), // 开启后填的积分
        };
      });
      // 第2~n行打勾的积分规则
      let data2 = [];
      this.rowContentList.map((project) => {
        project.moduleRuleVos.map((ruleVos) => {
          data2.push({
            crmId: String(ruleVos.ruleId), // 列: 完成主题
            isStart: !!ruleVos.isStart, // 是否开启
            credit: String(ruleVos.credit || 0), // 开启后填的积分
            moduleId: String(ruleVos.moduleId), //主题id
          });
        });
      });
      // 接口入参
      let params = {
        projectId: this.projectId,
      };
      Object.assign(params, {
        data: JSON.stringify(data),
        data2: JSON.stringify(data2),
      });
      this.$axios
        .post("/modulecreditrule/updateCreditRule", params)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    // 保存更改
    click_save_info() {
      this.saveInfo();
    },
  },
};
</script>

<style type="text/css" lang="scss">
.vy-cmp-cs-score {
  width: 100%;
  height: 100%;
  background: #ffffff;
  .vy-cmp-cs-score-container {
    .vy-cmp-cs-score-form {
      margin: 15px 0;
      .vy-row {
        border-bottom: 1px solid #ebebec;
        &.first-row {
          background: rgba(242, 245, 254, 1);
        }
        .vy-row-col1 {
          padding: 20px 15px;
        }
        .vy-row-col2 {
          padding: 20px;
          border: 1px solid #ebebec;
          border-top: none;
          border-bottom: none;
        }
        .vy-row-col3 {
          padding: 20px 0 20px 20px;
        }
        .vy-row-mb {
          margin-bottom: 10px;
        }
        .ant-input-number {
          width: 50px;
          .ant-input-number-handler-wrap {
            width: 15px;
            .ant-input-number-handler-up-inner,
            .ant-input-number-handler-down-inner {
              right: 2px;
            }
          }
        }
        .unable-label {
          display: inline-block;
          height: 32px;
          line-height: 32px;
        }
      }
    }
  }
}
</style>
